<template>
  <div style="width: 1400px; align-self: center; justify-content: center;">
	  <div style="height: 40px;">
	  	
	  </div>
  	<el-carousel :interval="5000" type="card" height="400px" indicator-position="outside">
  	    <el-carousel-item v-for="item in carouselData" :key="item" style="box-shadow: 3px 3px 15px 2px #d3d3d3;">
  	        <el-image :src="item.url" alt="" :fit="cover"/>
  	    </el-carousel-item>
  	</el-carousel>
	  <div style="display: flex;flex-direction:row;">
    <div style="flex: 1;"></div>
    <div style="flex: 13;display: flex;flex-direction: column;">
        <div><TLFS/></div>
        <div style="display: flex;flex-direction: row;">
            <el-card v-for="item in msData" :key="item.id" @click="goods">
                <img
                :src='item.url'
                style="width: 220px ;height: 200px;"
                />
                <template #footer> 
                    <span class="price-icon">￥</span>
                    <span class="price">{{item.price}}</span>
                    <br/>
                    <span>{{item.name}}</span>
                </template>
            </el-card>
        </div>
    </div>
</div>

	<div style="height: 60px;"></div>
		<div style="display: flex;flex-direction:row;">
			<div style="flex: 1;"></div>
			<div style="flex: 13;display: flex;flex-direction: column;">
				<div><HS/></div>
				<div style="display: flex;flex-direction: row;"  >
								
					<el-card 
      				v-for="item2 in tlData" 
      				:key="item2.id"
      				@click="goods(item2)"
      				>
      				<img
        				:src="item2.url"
        				style="width: 100%; height: 180px;"
      				/>
      				<template #footer>
        			<div > 
          				<span class="price-icon">￥</span>
          				<span class="price">{{ item2.price }}</span>
          				<br/>
          				<span>{{ item2.name }}</span>
        			</div>
      				</template>
    				</el-card>
						
				</div>
			</div>
			
		</div>
	<router-view></router-view>
		
	</div>

	
	
</template>

<script setup>
import {ref} from "vue"
import TLFS from '@/components/icons/timeLimitedFlashSale'
import HS from '@/components/icons/hotSales'
import router from '@/router';
import { useRoute } from 'vue-router';


const carouselData = [
	{url: new URL("@/assets/images/血耳1.jfif",import.meta.url).href},
	{url: new URL("@/assets/images/good1.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/good7.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/雪耳4.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/雪耳5.jpg",import.meta.url).href},
	{url: new URL("@/assets/images/雪耳1.jpg",import.meta.url).href}
]
const tlData= [
        {
          id: 1,
		  url: new URL("@/assets/images/雪耳6.gif",import.meta.url).href,
          price: 23.00,
          name: '雪耳'
        },
        {
          id: 2,
          url: new URL("@/assets/images/雪耳5.jpg",import.meta.url).href,
          price: 55.00,
          name: '雪耳'
        },
		{
          id: 3,
          url: new URL("@/assets/images/雪耳4.jpg",import.meta.url).href,
          price: 17.00,
          name: '雪耳'
        },
		{
          id: 4,
          url: new URL("@/assets/images/雪耳3.jpg",import.meta.url).href,
          price: 16.00,
          name: '雪耳'
        },
		{
          id: 5,
          url: new URL("@/assets/images/雪耳2.jpg",import.meta.url).href,
          price: 19.00,
          name: '雪耳'
        }
]
const msData= [
        {
          id: 1,
		  url: new URL("@/assets/images/莲子羹.png",import.meta.url).href,
          price: 23.56,
          name: '即食型血耳莲子羹'
        },
        {
          id: 2,
          url: new URL("@/assets/images/精油.png",import.meta.url).href,
          price: 55.63,
          name: '保康血耳精油'
        },
		{
          id: 3,
          url: new URL("@/assets/images/香皂.png",import.meta.url).href,
          price: 36.90,
          name: '保康血耳香皂'
        },
		{
          id: 4,
          url: new URL("@/assets/images/湿纸巾.jpg",import.meta.url).href,
          price: 8.90,
          name: '保康血耳湿纸巾'
        },
]

function goods(){
	router.push({name: 'GoodsInfo'})
}
</script>

<style scoped lang="scss">
.el-carousel__item:nth-child(2n) {
}

.el-carousel__item:nth-child(2n + 1) {
}
:deep(.el-carousel__indicator--horizontal .el-carousel__button){
	margin-top: 20px;
    width: 50px;
    height: 8px;
    border-radius: 31px;
    background: #AAAAAA80;
  }
// 指示灯选中的样式
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button){
	  margin-top: 20px;
    width: 50px;
    height: 8px;
    border-radius: 31px;
    background: #fff;
  }
  .el-card{
	  width: 250px;
	  max-height: 350px;
	  margin: 10px;
  }
  .price-icon{
  	color: #ff6200;
  	font-size: 16px;
  	font-weight: 700;
  	line-height: 16px;
	 cursor: default;
  }
  .price{
  	color: #ff6200;
  	font-size: 24px;
  	font-weight: 700;
  	line-height: 36px;
  	font-family: AlibabaSans102v1TaoBao-Bold,Alibaba-Sans102,PingFangSC-Regular;
	 cursor: default;
  }
  span{
	   cursor: default;
  }
  
</style>